<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html lang="zh-CN">
   <head>
	 <meta charset="utf-8">
	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
	<div class="modal-content">
	  <div class="modal-header">
	    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	    <h4 class="modal-title" id="myModalLabel"><c:if test="${type==1}">新增</c:if><c:if test="${type==2}">编辑</c:if></h4>
	  </div>
	  <div class="modal-body">
	
	    <form id="objectForm" class="form-horizontal" method="post">
	    
	      <div class="form-group">
	        <input type="hidden" name="id" value="${user.id}"/>
	        <input type="hidden" class="typeCode" value="${type}"/>
	        <label for="sysAccountName" class="col-sm-2 control-label"><span style="color:red;"> * </span>账户</label>
	        <div class="col-sm-6">
	          <c:if test="${type==2}"><input type="hidden" id="accountEdit" value="${user.sysAccount.id}"></c:if>
	          <select class="form-control combox" id="account" name="sysAccount[id]" data-live-search="true">
		         <c:forEach items="${accountList}" var ="account">
		             	 <option value="${account.id}">${account.name}</option>
		         </c:forEach>
		      </select> 
	        </div>
	      </div> 
	      
	      <div class="form-group">
	        <label for="project" class="col-sm-2 control-label">房址</label>
	        <div class="col-sm-10">        	
	        	<select class="form-control combox"  id="unitIds"  data-live-search="true" multiple>
		         	<c:forEach items="${projectList}" var ="project">
	             	 <option disabled>${project.name}</option>
			         <c:forEach items="${buildingList}" var ="building">
			         	<c:if test="${building.sysProject.id == project.id}">
			             	 <option disabled>&nbsp;&nbsp;&nbsp;&nbsp;${building.name}</option>
			             	 <c:forEach items="${unitList}" var ="unit">
					         	<c:if test="${unit.sysBuilding.id == building.id}">
					             	 <option value="${unit.id}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${unit.name}</option>
					            </c:if> 	 
					         </c:forEach>
			            </c:if> 	 
			         </c:forEach>
		         </c:forEach>
		      	</select> 
	        </div>
	      </div>  
	      
	      <div class="form-group">
	        <label for="name" class="col-sm-2 control-label"><span style="color:red;"> * </span>姓名</label>
	        <div class="col-sm-6">
	          <input type="text" class="form-control" id="name" name="name" value="${user.name}">
	        </div>
	      </div> 
	      
	      <div class="form-group">
	        <label for="code" class="col-sm-2 control-label"><span style="color:red;"> * </span>编码</label>
	        <div class="col-sm-6">
	          <input type="text" class="form-control" id="code" name="code" value="${user.code}">
	        </div>
	      </div>  
	      
	      <div class="form-group">
	        <label for="sex" class="col-sm-2 control-label">性别</label>
	        <div class="col-sm-6">
	          <input type="text" class="form-control" id="sex" name="sex" value="${user.sex}">
	        </div>
	      </div>  
	      
	      <div class="form-group">
	        <label for="telephone" class="col-sm-2 control-label">手机号</label>
	        <div class="col-sm-6">
	          <input type="text" class="form-control" id="telephone" name="telephone" value="${user.telephone}">
	        </div>
	      </div>  
	      
<%-- 	      <div class="form-group">
	        <label for="project" class="col-sm-2 control-label">项目</label>
	        <div class="col-sm-2">
	          <select class="form-control" id="project_name">
		         <c:forEach items="${projectList}" var ="project">
		             	 <option value="${project.id}">${project.name}</option>
		         </c:forEach>
		      </select> 
	        </div>
	        <label for="building" class="col-sm-2 control-label">楼栋</label>
	        <div class="col-sm-2">
	          <select class="form-control" id="building_name">
		      </select> 
	        </div>
	        <label for="unit" class="col-sm-2 control-label">单元</label>
	        <div class="col-sm-2">
	          <select class="form-control" id="unit_name">
		      </select> 
	        </div>
	      </div>  --%>
	      
	      <div class="form-group">
	        <label for="identity" class="col-sm-2 control-label">身份证号</label>
	        <div class="col-sm-6">
	          <input type="text" class="form-control" id="identity" name="identity" value="${user.identity}">
	        </div>
	      </div>  
	      
	    </form>
	  </div>
	  <div class="modal-footer">
	  <div class="form-group">
	    <button type="button" class="btn btn-info btn-white btn-round" onclick="objectSubmit();"> <i class="glyphicon glyphicon-ok bigger-125"></i> 确认</button>
	    <button type="button" class="btn btn-default btn-white btn-round" data-dismiss="modal"><i class="glyphicon glyphicon-remove bigger-125"></i> 取消</button>
	  </div>
	  </div>
	</div>
	
	<script>
	 var path = "<%=path%>";
	 
	 $(function(){
		//编辑状态下显示已保存的项目
	   	 if($(".typeCode").val()==2){
	   		var account = $("#accountEdit").val();
		    $('#account').select2({width:'270px'}).val(account).trigger("change");
	   	 }
     });
	 
	 /*************** 提交表单 *******************/
 	 function objectSubmit(){  
 	 	var url= null;
 	 	var type = $('.typeCode').val();
 	 	var unitIds = $("#unitIds").val();
		if(type==1){//添加实体
			url = path + "/userController/new"+"/"+unitIds;
		}else{//编辑实体
			url = path + "/userController/edit"+"/"+unitIds;
		}
     	$.ajax({
		  type: "post",
		  url: url,
		  async:false,
		  data: JSON.stringify($('#objectForm').serializeObject()),
		  dataType: "json",
		  contentType:"application/json",  
		  success: function(result){
		         if(result.status){        	 
		        		$.toast({
		        		    text: result.message,
		        		    hideAfter : 1500,  
		        		    stack : 1,  
		        		    showHideTransition: 'slide',
		        		    icon: 'success',
		        		    textAlign : 'center',
		        		    position : 'top-right'
		        		})
		        	   $('#objectForm').parents('.modal').modal('hide');
		        	   $table.bootstrapTable('refresh');
		         }else{
		        	 $.toast({
		        		    text: result.message,
		        		    hideAfter : 1500,  
		        		    stack : 1,  
		        		    showHideTransition: 'slide',
		        		    icon: 'error',
		        		    textAlign : 'center',
		        		    position : 'top-right'
		        		})
		         }
		  }
         });
      } 

	  /*************** 动态加载房址 *******************/
      $(document).ready(function () {
    	  
     		$('#unitIds').select2({
       			placeholder: "请选择项目",
       			tags:true,  
       	        createTag:function (decorated, params) {  
       	            return null;  
       	        },  
       			width:'450px'
       		});
     		
       		//编辑状态下显示已保存的项目
        	if($(".typeCode").val()==2){
        		 var unitChecked = [];
        		 <c:forEach items="${unitListCheck}" var ="unitCheck">
        		      unitChecked.push("${unitCheck.id}");
     	         </c:forEach>
     	       $('#unitIds').select2("val",unitChecked);
        	}
    	  
/*          $.ajaxSettings.async = false;
  	 	 ajaxSelectBuilding($('#project_name').find('option:selected').attr("value"));
  	 	 ajaxSelectUnit($('#building_name').find('option:selected').attr("value"));
  	     $.ajaxSettings.async = true;
      

	     $('#project_name').on('change',  function (){
			$.ajaxSettings.async = false;
			ajaxSelectBuilding($(this).find('option:selected').attr("value"));
			ajaxSelectUnit( $('#building_name').find('option:selected').attr("value"));
			$.ajaxSettings.async = true;
		 });

		 $('#building_name').on('change',  function (){
			var bId = $('#building_name').find('option:selected').attr("value");
			ajaxSelectUnit(bId);
		 }); */
	  });

/*     function ajaxSelectBuilding(pId){
    	    //根据项目态加载楼栋
      	var url = path + "/buildingController/getBuildingByProject";
		$('#building_name').children().remove();
	    	$.ajax({
	        	url: url,
	        	type: 'POST',
	        	data: {'projectId':pId},
	        	dataType: 'json',
	        	success: function (data) {
	        		$.each(data, function(idx, obj) {
	        			console.log(obj.name);
	        			var defaultOption ;
	        			if(obj.id == '${building.id}'){
	        				defaultOption = $('<option value='+ obj.id + ' selected>'+ obj.name +'</option>');
	        			}else{
	        				defaultOption = $('<option value='+ obj.id + '>'+ obj.name +'</option>');
	        			}
	        			$('#building_name').append(defaultOption);
	        		});
	        	}
	    	});
	   } */
	</script>
	</body>
</html>
